<template>
  <div>
    <van-cell-group>
      <van-field
        :value="username"
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        :value="phone"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
        :border="false"
      >
        <van-button slot="button" size="small" style="width:104px" type="primary" @click="sendAuthorizedCode">
          {{codeLabel}}
        </van-button>
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        :value="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :border="false"
        use-button-slot
      >
      </van-field>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round
                  block
                  @click="submitTelephone"
                  type="info"
                  native-type="submit">
        提交
      </van-button>
    </div>
    <div style="width:100%;min-height:90px;text-align:center;line-height:90px">相关资料介绍，认证的必要行</div>

  </div>
</template>
<script>
  let intevel = 0
  import {Toast} from "vant";
  import keyboard from "../components/keyboard";

  export default {
    components: {
      keyboard
    },
    data() {
      return {
        username: '',
        phone: '',
        sms: '',
        codeLabel: '发送验证码',
        isSend: true,
      }
    },
    mounted() {

      var userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (userinfo == null) {
        this.getopenID();
      } else {
        this.oepnId = userinfo.openid;
        console.log(userinfo);
      }
      this.getseatcolumns();
      this.getoperation();
      this.getseat_spec();
      this.getcarlist();
    },
    destroyed() {
      clearInterval(intevel)
    },
    methods: {
      submitTelephone() {
        this.$store.commit('setTelephoneAuthorized', true)
        this.$toast.loading({
          duration: 2000,       // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '认证成功，即将跳转到预约界面',
          loadingType: 'spinner',
          selector: '#custom-selector',
          onClose: () => {
            this.$router.push('/appointmentlist')
          }
        })
      },
      sendAuthorizedCode() {
        if (this.isSend) {
          this.isSend = false;
          var i = 60
          intevel = setInterval(() => {
            i--;
            if (i > 0) {
              this.codeLabel = `重新发送（${i}）`
            } else {
              this.codeLabel = '发送验证码'
              this.isSend = true;
              clearInterval(intevel)
            }
          }, 1000)
        }
      },
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null) return decodeURIComponent(r[2]);
        return null; // 返回参数值
      },
      getopenID() {
        let code = this.$route.query.code || this.getUrlParam("code");
        // var state = this.$route.query.state || this.getUrlParam('state')
        var redirectUri = escape(window.location.href + "?state=true");
        var APPID = "wxd5c04a0b457efd8f";
        if (code) {
          var params = {
            code: code
          };
          this.axios
            .get("/api/index/get_openid", {params: params})
            .then(res => {
              var data = res.data;
              localStorage.setItem("userinfo", JSON.stringify(res.data));
              this.oepnId = res.data.data.openid;
              console.log(data);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          var wxopenidurl =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            redirectUri +
            "&response_type=code&scope=snsapi_userinfo&state=true#wechat_redirect";
          window.location.href = wxopenidurl;
        }
      },
      getcarlist() {
        this.actions = [];
        var params = {
          oepnId: this.openId
        };
        this.axios
          .post("/careful/car_list", params)
          .then(res => {
            console.log(res);
            var list = res.data.data.list;
            list.forEach((i, k) => {
              this.actions.push({
                name: i.models,
                subname: "车牌号：" + i.plateNumber,
                value: i.plateNumber
              });
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      onSubmit(values) {
        this.boradparams.oepnId = this.oepnId;
        this.axios
          .post("/about/careful_add", this.boradparams)
          .then(res => {
            console.log(res);
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg + "请重新填写错误信息");
            } else {
              Toast.success(res.data.msg);
            }
          })
          .catch(err => {
            console.error(err);
          });
      },
      onClickRight() {
        this.$router.push("appointmentlist");
      },
      getboard(borad) {
        // console.log(borad)
        this.boradform.plateNumber = borad;
        this.boradparams.plateNumber = borad.join("");
      },
      // 事故
      getseatcolumns() {
        this.accidentcolumns = [];
        this.axios
          .post("/menu/accident")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = {keyId: element.value, text: element.key};
              this.accidentcolumns.push(data);
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 维修项目
      getmaintenance_pro() {
        this.axios
          .post("/menu/maintenance_pro")
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 运营
      getoperation() {
        this.operationcolumns = [];
        this.axios
          .post("/menu/operation")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = {keyId: element.value, text: element.key};
              this.operationcolumns.push(data);
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 座位规格
      getseat_spec() {
        this.seatcolumns = [];
        this.axios
          .post("/menu/seat_spec")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = {keyId: element.value, text: element.key};
              this.seatcolumns.push(data);
            });
            // this.seatcolumns=
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 保修项目
      getwarranty_pro() {
        this.axios
          .post("/menu/warranty_pro")
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.error(err);
          });
      },
      seatonConfirm(value) {
        console.log(value);
        // var value = value.text
        this.boradform.size = value.text;
        this.boradparams.size = value.keyId;
        this.seatshowPicker = false;
      },
      accidentonConfirm(value) {
        this.boradform.accident = value.text;
        this.boradparams.accident = value.keyId;
        this.accidentshowPicker = false;
      },
      operationConfirm(value) {
        this.boradform.scale = value.text;
        this.boradparams.scale = value.keyId;
        this.operationcshowPicker = false;
      },
      onConfirm(date) {
        this.value = `${date.getMonth() + 1}/${date.getDate()}`;
        var timestamp = parseInt(new Date(date).getTime() / 1000);
        this.boradparams.appointmentTime = timestamp;
        this.showCalendar = false;
      },
      timesonConfirm(times) {
        var date = times;
        var timestamp = parseInt(new Date(times).getTime() / 1000);
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m >= 1 && m <= 9) {
          m = "0" + m;
        }
        if (d >= 0 && d <= 9) {
          d = "0" + d;
        }
        var timer = date.getFullYear() + "-" + m + "-" + d;
        this.boradform.appointmentTime = timer;
        this.boradparams.appointmentTime = timestamp;
        this.timesshowCalendar = false;
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.boardselectshow = false;
        this.boradparams.plateNumber = item.value;
        this.boradArr = item.value.split("");
      }
    }
  };
</script>
<style scoped>
  .annual-tabs {
    margin-top: 20px;
    width: 100%;
  }

  .infotxt {
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 9px 40px;
    font-size: 17px;
  }

  .keyboardCont {
    margin: 15px;
    padding-bottom: 15px;
  }
</style>
<style>
  .van-field__label {
    text-align: left;
  }
</style>
